<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	request.setAttribute("basePath", path);
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Faurecia</title>
    <link rel="stylesheet" type="text/css" href="${basePath}/resource/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${basePath}/resource/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${basePath}/resource/jquery-easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="${basePath}/resource/jquery-easyui/demo/demo.css">
    <script type="text/javascript" src="${basePath}/resource/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${basePath}/resource/jquery-easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
    	.boardTxt{
    		font-size:20px;
    	}
    	.boardTitle{
    		font-size:36px;
    		font-weight:800;
    	}
    	.table-a{
    		border:1px solid
   		} 
   		.table-a td{
   			border:1px solid #CCC
		} 
    </style>
</head>
<body>
	<div >
	    <table cellpadding="5" class="table-a"  id="dataDiv">
	    	<%-- <tr>
	    		<td colspan="2">
	    			<img alt="" src="${basePath}/resource/image/logo.png" style="height:40px;width:120px;background:#B3DFDA;margin-top:10px;">
	    		</td>
	    		<td colspan="6">
	    			<div class="boardTitle" align="center">
	    				仪表板实时库存
    				</div>
	    		</td>
	    		<td>
	    			<div id="nowDate">
	    				######
	    			</div>
	    		</td>
	    		<td>
	    			<img alt="" src="${basePath}/resource/image/img1.png" style="height:40px;width:50px;background:#B3DFDA;margin-top:10px;">
	    		</td>
	    	</tr>
	    	<tr>
	    		<td>
	    			<div class="boardTxt">
	    				Prog
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				Ref
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				零件简称
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				MIN
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				MAX
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				实时库存
	    			</div>
	    		</td>
	    		<td>
	    			<div>
	    				
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				PDP数量
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				生成进度
	    			</div>
	    		</td>
	    		<td>
	    			<div class="boardTxt">
	    				待完成
	    			</div>
	    		</td>
	    	</tr> --%>
	    	<%-- <c:forEach  items="${dataList}" var="vo">
	    		<tr>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.prog}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.ref}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.itemNameShort}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.min}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.max}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.intimeCnt}
		    			</div>
		    		</td>
		    		<td>
		    			<div>
		    				
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.pdpCnt}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.compCnt}
		    			</div>
		    		</td>
		    		<td>
		    			<div class="boardTxt">
		    				${vo.waitCnt}
		    			</div>
		    		</td>
		    	</tr>
	    	</c:forEach> --%>
	    </table>
    </div>
    <script>
    	$(document).ready(function() {
    		getData();
    		setInterval('getData()',1000); //指定10秒刷新一次 
    		setInterval('getNowFormatDate()',500); //指定500毫秒刷新一次 
    	})
    	function getData(){
    		$.ajax({
				url:"${basePath}/stockboard/getStock/",
				async:false,
				dataType : "json",
				success : function(data) {
					console.info(data)
					if(data){
						var html = '<tr>'+
							    		'<td colspan="2">'+
							    			'<img alt="" src="${basePath}/resource/image/logo.png" style="height:40px;width:120px;background:#B3DFDA;margin-top:10px;">'+
							    		'</td>'+
							    		'<td colspan="6">'+
							    			'<div class="boardTitle" align="center">'+
							    				'仪表板实时库存'+
						    				'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div id="nowDate">'+
							    				'######'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<img alt="" src="${basePath}/resource/image/img1.png" style="height:40px;width:50px;background:#B3DFDA;margin-top:10px;">'+
							    		'</td>'+
							    	'</tr>'+
							    	'<tr>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'Prog'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'Ref'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'零件简称'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'MIN'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'MAX'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'实时库存'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div>'+
							    				
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'PDP数量'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'生成进度'+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				'待完成'+
							    			'</div>'+
							    		'</td>'+
							    	'</tr>';
						for(var i=0;i<data.length;i++){
							html += '<tr>'+
									    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].prog+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].ref+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].itemNameShort+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].min+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].max+
							    			'</div>'+
							    		'</td>'+
							    		'<td>';
							if(data[i].intimeCnt >= data[i].min && data[i].intimeCnt <= data[i].max){
								html+='<div class="boardTxt" style="background-color:#92D050">'+
				    				data[i].intimeCnt+
				    			'</div>';
							}else if(data[i].intimeCnt < data[i].min){
								html+='<div class="boardTxt" style="background-color:#FF0000">'+
				    				data[i].intimeCnt+
				    			'</div>';
							} else{
								html+='<div class="boardTxt" style="background-color:#FFFF66">'+
				    				data[i].intimeCnt+
				    			'</div>';
							}  		
							
			    			html+='</td>'+
							    		'<td>'+
							    			'<div>'+
							    				
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].pdpCnt+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].compCnt+
							    			'</div>'+
							    		'</td>'+
							    		'<td>'+
							    			'<div class="boardTxt">'+
							    				data[i].waitCnt+
							    			'</div>'+
							    		'</td>'+
							    	'</tr>';
						}
						$("#dataDiv").html(html);
					}
				},
				error : function() {
				}
			})
    	}
    	function myrefresh() { 
			window.location.reload(); 
		} 
    	
    	function getNowFormatDate() {
    	    var date = new Date();
    	    var seperator2 = ":";
    	    var currentdate = date.getHours() + seperator2 + date.getMinutes()
    	            + seperator2 + date.getSeconds();
    	    $("#nowDate").html(currentdate);
    	}
	</script>
</body>
</html>